<!DOCTYPE html>
<html>

<head>
	<title> </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<style>
		body {
			font-family: '宋体';
			font-size: 24px;
			color: black;
			margin: 0;
			padding: 0;

		}

		.div-card {
			margin: 0;
			padding: 0;
			text-align: center;
			position: relative;
			page-break-after: always;
			width: 210mm;
			
			padding-top: 5mm;
			padding-left: 5mm;
			height: 140mm;
		}

		table {
			border-collapse: collapse;
		}

		table tr td {
			height: 16mm;
		}

		@media print {
			body {
				-webkit-print-color-adjust: exact;
			}
		}
	</style>

	<style type="text/css" media="print">
		@page {
			margin: 0;
			size: A5 landscape;
		}
	</style>

</head>

<body>
	<div id="app">
		<div class="div-card">
			<table border="1" style="width: 160mm;margin-left: 20mm;margin-top:10mm;">
				<tr>
					<td style="width: 40mm;">收货人</td> 

					<td style="width:130mm;">{{info.Receiver}}  {{info.ReceiverPhone}}</td>  


				</tr>
				 
				<tr>
					<td>收货地址</td> 

					 <td >{{info.Address}} </td>  
					 
				</tr>
				<tr>
					 
					 <td>物流公司</td> 

					 <td > {{info.LogisticsName}}</td>  
				</tr>
				<tr>
				 
					<td>件数</td> 

					<td >{{info.Num}}件 </td>  
					 

				</tr>
				<tr>
				  
					<td>重量</td> 

					<td >{{info.Weight}}kg </td>  

				</tr>
				<tr>
					<td style="width: 40mm;">发货人</td> 

					<td style="width:130mm;">{{info.Sender}}  {{info.SenderPhone}}</td>  


				</tr>
				<tr>
					<td style="width: 40mm;">日期</td> 

					<td style="width:130mm;"> {{ dateformat(info.CreatedTime,'yyyy年MM月dd日')}}  </td>  


				</tr>
			</table>
		</div>

	</div>
	<script src="../../js/vue.min.js"></script>
	<script language="javascript" type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				info: {},

			},
			computed: {

			},
			methods: {
				dateformat(dtStr, fmt) { //author: meizz 
					if (!dtStr) {
						return "";
					}
					if (dtStr.indexOf('年') > -1 && dtStr.indexOf('-') < 0) {
						return dtStr;
					}
					var dt = new Date(dtStr);
					var o = {
						"M+": dt.getMonth() + 1, //月份 
						"d+": dt.getDate(), //日 
						"h+": dt.getHours(), //小时 
						"m+": dt.getMinutes(), //分 
						"s+": dt.getSeconds(), //秒 
						"q+": Math.floor((dt.getMonth() + 3) / 3), //季度 
						"S": dt.getMilliseconds() //毫秒 
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + "").substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
							"00" + o[k])
							.substr(("" + o[k]).length)));
					return fmt;
				}
			}
		});
		function printData(info) {
			app.info = info;
			setTimeout(() => {
				window.print();

			}, 500)

		}
	</script>
</body>

</html>